<!-- 设置登录密码 -->
<template>
  <div id="ChangePassword">
    <Head BackType1="1" title="设置登录密码"></Head>
    <div id="ChangePasswordMain">
      <!-- 原密码 -->
      <div class="Password" id="OriginalPassword">
        <div class="PasswordTitle">原密码</div>
        <van-cell-group class="PasswordBox">
          <van-field class="PasswordInput" type="password" v-model="oldvalue" clearable placeholder="请输入原密码" />
        </van-cell-group>
      </div>
      <!-- 新密码 -->
      <div class="Password" id="NewPassword">
        <div class="PasswordTitle">新密码</div>
        <van-cell-group class="PasswordBox">
          <van-field class="PasswordInput" type="password" v-model="newvalue1" clearable placeholder="请输入登录密码" />
        </van-cell-group>
        <van-cell-group class="PasswordBox">
          <van-field class="PasswordInput" type="password" v-model="newvalue2" clearable placeholder="请再次输入登录密码" />
        </van-cell-group>
      </div>
      <!-- 确定 -->
      <van-button class="Determine" @click="Submit()" type="info">确认</van-button>
    </div>
  </div>
</template>

<script>
  import Head from '../components/Head'
  import { Field, CellGroup,Button, Dialog } from 'vant';
  export default {
    data(){
      return{
        oldvalue:'',
        newvalue1:'',
        newvalue2:'',
      }
    },
    components:{
      Head,
      [Field.name]:Field,
      [CellGroup.name]:CellGroup,
      [Button.name]:Button,
      [Dialog.name]:Dialog,
    },
    methods:{
      Submit(){
        if(this.oldvalue ==''||this.newvalue1 ==''||this.newvalue2==''){
          Dialog.alert({
            title: '提示',
            message: '密码修改失败，请确保密码均已填写'
          }).then(() => {
            // on close
          });
        }else{
          if(this.newvalue1 !=this.newvalue2){
            Dialog.alert({
              title: '提示',
              message: '新密码两次填写不一致'
            }).then(() => {
              // on close
            });
          }else{
            Dialog.confirm({
              title: '提示',
              message: '请确保你记住了新密码'
            }).then(() => {
              /**
              * 修改邮箱
              */
              var ChangePassword={
                  password : this.oldvalue,
                  newPassWord : this.newvalue1,
                  newPassWord1 : this.newvalue2,
              }
              console.log(ChangePassword)
              this.$post(urlConfig.editPassword,ChangePassword)
              .then(res => {
                console.log(res);
                var hasAmend = true;
                this.$router.push('/Security')
              })
            })
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  #ChangePassword{
    #ChangePasswordMain{
      width: 750px;
      position: fixed;
      top: 88px;
      overflow: scroll;
      .Password{
        .PasswordTitle{
          font-size: 24px;
          padding: 0 30px;
          height: 60px;
          line-height: 60px;
          color: #989794;
        }
        .PasswordBox{
          display: flex;
          align-items: center;
          height: 88px;
          .PasswordInput{
            .van-cell{
              font-size: 32px;
              font-family:PingFangSC-Regular;
              &::-webkit-input-placeholder {
                  color:#D6D7DC !important;
              }

              &:-ms-input-placeholder {
                  color:#D6D7DC !important;
              }
            }
          }
        }
      }
      .Determine{
        width: 690px;
        height: 88px;
        background: #627DF1;
        font-size: 32px;
        margin: 130px 30px 0; 
      }
    }
  }
</style>